﻿<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户登录界面</title>
</head>
<style>
*,:after,:before{box-sizing:border-box}
html{position:relative;background:#1aa3fa;font-family:Roboto,sans-serif}
.brand{width:100%;text-align:center}
.brand a{height:65px;font-size:50px;text-align:center}
.brand img.logo{width:100%;max-height:100px;max-width:300px;padding:0 30px;text-align:center}
.panel-lite{margin:50px auto 0;max-width:380px;background:#fff;padding:45px 20px;border-radius:4px;box-shadow:2px 2px 5px rgba(0,0,0,.2);position:relative}
.panel-lite h4{font-weight:400;font-size:24px;text-align:center;color:#1aa3fa;margin:15px auto}
.panel-lite a{display:inline-block;margin-top:25px;text-decoration:none;color:#1aa3fa;font-size:14px}
.form-group{position:relative;font-size:15px;color:#666}
.form-group+.form-group{margin-top:30px}
.form-group .form-label{position:absolute;z-index:1;left:0;top:5px;-webkit-transition:.3s;transition:.3s}
.form-group .form-control{width:100%;position:relative;z-index:3;height:35px;background:0 0;border:none;padding:5px 0;-webkit-transition:.3s;transition:.3s;border-bottom:1px solid #777}
.form-group .form-control:invalid{outline:0}
.form-group .form-control:focus,.form-group .form-control:valid{outline:0;color:#1aa3fa;box-shadow:0 1px #1aa3fa;border-color:#1aa3fa}
.form-group .form-control:focus+.form-label,.form-group .form-control:valid+.form-label{font-size:12px;-ms-transform:translateY(-15px);-webkit-transform:translateY(-15px);transform:translateY(-15px)}
.floating-btn{background:#1aa3fa;width:60px;height:60px;border-radius:50%;color:#fff;font-size:32px;border:none;position:absolute;margin:auto;-webkit-transition:.3s;transition:.3s;box-shadow:1px 0 0 rgba(0,0,0,.3) inset;margin:auto;right:-30px;bottom:90px;cursor:pointer}
.floating-btn:hover{box-shadow:0 0 0 rgba(0,0,0,.3) inset,0 3px 6px rgba(0,0,0,.16),0 5px 11px rgba(0,0,0,.23)}
.floating-btn:hover .icon-arrow{-ms-transform:rotate(45deg) scale(1.2);-webkit-transform:rotate(45deg) scale(1.2);transform:rotate(45deg) scale(1.2)}
.floating-btn:active,.floating-btn:focus{outline:0}
.icon-arrow{position:relative;width:13px;height:13px;border-right:3px solid #fff;border-top:3px solid #fff;display:block;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);margin:auto;-webkit-transition:.3s;transition:.3s}
.icon-arrow:after{content:'';position:absolute;width:18px;height:3px;background:#fff;left:-5px;top:5px;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.verifycode{ width:120px; position:absolute; right:20px; top:-3px}
.verifycode img{ width:120px;}
.floating2-btn{background:#1aa3fa; position:absolute; right:20px; bottom:30px; height:40px; width:120px; text-align:center; color:#fff; font-size:16px; cursor:pointer; border-radius:3px; border:none;}
</style>
<body>
    <div class="panel-lite">
        <div class="brand">
            <a href="#"><img class="logo" src="img/logo.png"></a>
        </div>
    	<h4>后台管理登录</h4>
        <div class="form-group">
            <input required="required" class="form-control"/>
            <label class="form-label">用户名</label>
        </div>
        <div class="form-group">
            <input type="password" required="required" class="form-control"/>
            <label class="form-label">密　码</label>
        </div>
        <div class="form-group">
            <input type="password" required="required" class="form-control"/>
            <label class="form-label">验证码</label>
            <span class="verifycode">
            	<img class="verifyimg" alt="验证码" src="http://demo.lingyun.net//admin.php?s=/login/verify.html" title="点击刷新">
            </span>
        </div>
        <a href="#">忘记密码 ?</a>
        <button class="floating2-btn">登录</button>
    </div>
</body>
</html>
